<!-- 
* 功能-页面实现
* Date: 2023-8-6
* Author: 王泽同
 -->
<template>
  <div style="position: relative">
    <el-radio-group
      v-model="layer"
      :class="visible == true ? 'btn_d btnLayer' : 'btn_c btnLayer'"
    >
      <el-radio-button
        v-for="area in areaDetail"
        :label="area.buildName"
        @change="showFloor(area.floorDesc)"
      >
        {{ area.buildName }}
      </el-radio-button>
    </el-radio-group>
    <el-radio-group
      v-model="subLayer"
      v-if="hasSub"
      :class="visible == true ? 'btn_d2 subLayer' : 'btn_c2 subLayer'"
    >
      <el-radio-button
        v-for="area in subLayers"
        :label="area.buildName"
        @change="switchMap(area.name)"
      >
        {{ area.buildName }}
      </el-radio-button>
    </el-radio-group>
    <div class="btnGroup">
      <div v-for="(btn, index) in btns" :key="index">
        <img :src="image[btn.path]" class="img" width="36" height="36" />
        <span>{{ btn.label }}</span>
      </div>
    </div>
    <transition-group name="left">
      <div
        v-show="visible"
        class="drawer drawerLeft"
        key="1"
        style="margin-top: 100px"
      >
        <div class="title">
          <span>行李转盘区域开发情况</span>
          <el-button
            type="primary"
            class="newArea"
            :icon="Tools"
            @click="showAreaDialog('设置报警阈值')"
          >
          </el-button>
        </div>
        <el-row :gutter="16">
          <el-col :span="12" style="margin-bottom: 30px">
            <div
              style="
                width: 105px;
                height: 70px;
                margin-left: 20px;
                background-color: #ebf2fe;
                padding-left: 20px;
              "
            >
              <div style="display: inline-flex; align-items: center">
                <el-icon
                  style="
                    margin-right: 4px;
                    margin-bottom: 4px;
                    margin-top: 10px;
                  "
                  :size="30"
                >
                  <Warning />
                </el-icon>
                <div style="margin-left: 40px; margin-bottom: 5px; color: blue">
                  4
                </div>
              </div>
              <div class="statistic-footer" style="margin-top: 0px">
                <div class="footer-item">
                  <span>开放行李转盘</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div
              style="
                width: 105px;
                height: 70px;
                background-color: #f2f2f2;
                padding-left: 20px;
              "
            >
              <div style="display: inline-flex; align-items: center">
                <el-icon
                  style="
                    margin-right: 4px;
                    margin-bottom: 4px;
                    margin-top: 10px;
                  "
                  :size="30"
                >
                  <Warning />
                </el-icon>
                <div style="margin-left: 40px; margin-bottom: 5px">12</div>
              </div>
              <div class="statistic-footer" style="margin-top: 0px">
                <div class="footer-item">
                  <span>关闭行李转盘</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-divider style="width: 90%; margin: auto; padding: 0" />
        <div class="content">
          <FilterBar
            ref="FilterRef"
            :close-collapse="true"
            :filters="trolleyOptions"
          />
          <table-common
            :pagination="false"
            stripe
            :columns="exampleColumns"
            :loading="loading"
            :data="thresholdData1"
            size="small"
            @current-change="changeCurrent"
            @size-change="changePageSize"
            @click="gatePosition"
          >
            <template #id="{ row }">
              <!-- 自定义操作栏示例  -->
              <span
                v-if="row.areaName > queNumeber"
                style="color: rgb(243, 54, 54)"
                >{{ row.id }}</span
              >
            </template>
            <template #areaName="{ row }">
              <!-- 自定义操作栏示例  -->
              <span
                v-if="row.areaName > queNumeber"
                style="color: rgb(243, 54, 54)"
                >{{ row.areaName }}</span
              >
            </template>
            <template #action="{ row }">
              <!-- 自定义操作栏示例  -->
              <el-button
                class="link-btn"
                @click="handleEdit(row, item)"
                link
                type="primary"
                >查看</el-button
              >
            </template>
          </table-common>
        </div>
      </div>
      <img
        :class="visible == true ? 'btn_a btnLeft btn' : 'btn_b btnLeft btn'"
        :src="visible == true ? image.arrowLeft : image.arrowRight"
        key="2"
        style="float: left; padding-left: 3px; padding-right: 3px"
        @click="visible = !visible"
      />
      <div
        :class="
          visible == true
            ? 'mapLegendHot_b mapLegendHot'
            : 'mapLegendHot_a mapLegendHot'
        "
      >
        <span style="color: white;">热力图</span
        ><el-switch
          class="s"
          v-model="switchValue"
          width="56"
          size="large"
          @change="handleSwitchChange"
        />
      </div>
    </transition-group>

    <!-- 右边弹出 -->
    <transition-group name="right">
      <div v-show="visibleRight" class="drawer drawerRight" key="1">
        <div class="title">
          <span>排队人数警告</span>
        </div>
        <el-radio-group
          v-model="layer"
          :class="
            visible == true ? 'btn_d btnLayerRight' : 'btn_c btnLayerRight'
          "
        >
          <el-radio-button
            v-for="(area, index) in areaDetail.slice(-2)"
            :label="area.buildName"
            @change="showFloor(area.floorDesc)"
            :key="index"
          >
            <!-- {{ area.buildName }} -->
          </el-radio-button>
        </el-radio-group>

        <div class="content">
          <FilterBar
            ref="FilterRef"
            :close-collapse="true"
            :hasButton="true"
            :filters="rightOptions"
            @search-change="onSearch"
            @search-reset="onReset"
            @on-toggle="(val: any)=>$emit('on-toggle',val)"
          />
        </div>
        <el-divider style="width: 90%; margin: auto; padding: 0" />
        <div class="title">
          <div class="alamList">
            <div v-for="item in alamData" class="listDiv">
              <el-image
                style="
                  width: 115px;
                  height: 120px;
                  border-radius: 8px;
                  float: left;
                "
                :src="item.path"
              />
              <div
                style="float: left; border: 0; width: 220px; margin-left: 10px"
              >
                <div
                  style="
                    font-weight: bolder;
                    font-size: 18px;
                    line-height: 20px;
                  "
                >
                  {{ item.title }}
                </div>
                <div class="msg">告警区域：</div>
                {{ item.alamArea }}<br />
                <div class="msg">发生时间：</div>
                {{ item.time }}<br />
                <div class="msg">监控来源：</div>
                {{ item.source }}<br />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <img
          :class="
            visibleRight == true ? 'btn_f btnRight btn' : 'btn_e btnRight btn'
          "
          :src="visibleRight == true ? image.arrowRight : image.arrowLeft"
          key="2"
          style="float: left; padding-left: 3px; padding-right: 3px"
          @click="visibleRight = !visibleRight"
        />
      </div>
      <div
        :class="
          visibleRight == true
            ? 'mapLegend_a mapLegend'
            : 'mapLegend_b mapLegend'
        "
      >
        <span>图例</span>
        <!-- <span v-if="!visibleRight">区域图层</span> -->
        <!-- <el-switch v-model="value" class="sw" size="small" v-if="!visibleRight" /> -->
        <div>
          开放
          <div
            class="legend"
            style="background: #bad4fb; border: 1px solid #2f7df1"
          />
        </div>
        <div>
          未开放
          <div
            class="legend"
            style="background: #e2e2e2; border: 1px solid #e2e2e2"
          />
        </div>
        <div>
          选中
          <div
            class="legend"
            style="background: #fbdbb0; border: 1px solid #f59f2e"
          />
        </div>
        <div>
          人流预警
          <div
            class="legend"
            style="background: #f1a4ad; border: 1px solid #da0d26"
          />
        </div>
      </div>
    </transition-group>
  </div>
  <map-control @mapLoad="mapLoadEvent" />
  <edit-dialog
    class="dialog"
    :centerDialogVisible="showAreaDialogVisible"
    :tilte="title"
    :key="timer"
    :defaultButton="false"
    :closeOnClickModal="false"
    :myModal="false"
    :width="360"
  >
    <template #content>
      <!-- 直接调用FilterBar组件，不再使用layoutcard组件 -->
      <FilterBar
        ref="FilterRef"
        :close-collapse="true"
        :filters="areaOptions"
        :hasButton="false"
        :rules="rules"
        :hasTableButton="hasTableButton"
        @search-change="onSearch"
        @search-reset="onReset"
        @on-toggle="(val: any)=>$emit('on-toggle',val)"
      />
      <span style="position: relative; top: -50px; right: -230px"
        >予以警告</span
      >
    </template>
    <template #custom>
      <span class="dialog-footer">
        <el-button @click="Cancel">取消</el-button>
        <el-button type="primary" @click="Submit">保存</el-button>
      </span>
    </template>
  </edit-dialog>
</template>

<script lang="ts" setup>
import FilterBar from "@/components/FilterBar/index.vue";
import { computed, ref, reactive, onBeforeMount, nextTick } from "vue";
import TableCommon from "@/components/TableCommon/index.vue";
import editDialog from "@/components/editDialog/index.vue";
import { exampleColumns } from "@/views/keynote/carousel/config/columns";
import {
  trolleyOptions,
  areaOptions,
  rightOptions,
} from "@/views/keynote/carousel/config/filters";
import { areaDetail } from "@/config/config";
import { usePagination } from "vue-request";
// 以下3个为地图控件相关的组件
import mapControl from "@/components/map/index.vue";
import { store } from "@/components/map/mapStore";
import { image } from "@/assets/index";
import { Cloudy, Moon, Tools, Search } from "@element-plus/icons-vue";
import {
  ArrowRight,
  CaretBottom,
  CaretTop,
  Warning,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
// import { rules } from "@/views/eqpt/charge/config/rules";

const showAreaDialogVisible = ref(false);

const btnshow = ref(false);

const queNumeber = ref(13);
const timer = ref();
const visible = ref(false);
const visibleRight = ref(false);
// 用于保存机场层级
const layer = ref();
// 用于保存选择的机场子层级
const subLayer = ref();
// 用于保存机场子层级数组
const subLayers = ref([]);
// 是否显示机场子层级
const hasSub = ref(false);
const title = ref("");
// 用于保存地图坐标及相关信息
const mapPoint = ref({});
const mapLoadEvent = () => {
};

const switchValue = ref(false);

const handleSwitchChange = () => {  
  if (switchValue.value) {
    // 模拟数组，实际开发换成接口返回的数组数据
    var array = new Array();
    // 随机生成2000个坐标点
    for (var i = 0; i < 5000; i++) {
      var x = Math.random() * 800 + 136675.54999719388;
      var y = Math.random() * 600 + 40314.37943610105;
      var o = new Object();
      // 为每一个坐标点添加随机数值
      o.count = Math.floor(Math.random() * 50);
      o.x = x;
      o.y = y;
      array.push(o);
    }
    var renderer = {
      type: "heatmap",
      blurRadius: 10,
      colorStops: [
        { ratio: 0, color: "rgba(255, 255, 255, 0)" },
        { ratio: 0.2, color: "rgba(255, 255, 255, 1)" },
        { ratio: 0.5, color: "rgba(255, 140, 0, 1)" },
        { ratio: 0.8, color: "rgba(255, 140, 0, 1)" },
        { ratio: 1, color: "rgba(255, 0, 0, 1)" },
      ],
      minPixelIntensity: 0,
      maxPixelIntensity: 1000,
    };
    // 将模拟数组放入对应的方法
    store.BASE.drawHeatMap(array);
  } else {
    store.BNHeatMap.clear();
  }
};

var tool = null;
const draw = (type: string) => {
  // "point"：点、"line"：线、"freeline"：自由线、 "polygon"：面
  // "circle"：圆、"curve"：弧线、"freehandarrow"：箭头、"multihead"：多箭头、"beziercurve"：bezier线、"bezierpolygon"：bezier面
  drawMap();
  tool.activate("polygon");
};

const btns = ref([
  { label: "行李转盘区域", path: "layer" },
  { label: "出租车等待区域", path: "layer" },
]);
const alamData = ref([
  // 告警区域：
  {
    id: "1",
    title: "k区203排队人数告警",
    alamArea: "T3航站楼 F3 k区",
    time: "2023-03-03 13:40",
    source: "0023号摄像头",
    path: "",
  },
  {
    id: "1",
    title: "M区103排队人数告警",
    alamArea: "T3航站楼 F3 A区",
    time: "2023-03-03 13:40",
    source: "0023号摄像头",
    path: "",
  },
  {
    id: "1",
    title: "L区103排队人数告警",
    alamArea: "T3航站楼 F3 A区",
    time: "2023-03-03 13:40",
    source: "0023号摄像头",
    path: "",
  },
]);

const drawMap = () => {
  store.BNMap.removeGraphicsLayer("demo");
  // 向地图添加临时图层
  const clickLayer = store.BNMap.creatGraphicsLayer({ id: "demo" });

  store.BNMap.addGraphicsLayer(clickLayer);
  tool = store.BNMap.createPlot(
    {
      gl: clickLayer, //指定操作图层
      fillSymbol: {
        //设置绘制面样式
        color: [227, 139, 79, 0.8],
        outline: {
          color: [255, 255, 255],
          width: 1,
        },
      },
      lineSymbol: {
        color: [226, 119, 40],
        width: 2,
      },
      pointSymbol: {
        color: [226, 119, 40],
        outline: {
          color: [255, 255, 255],
          width: 2,
        },
      },
    },
    {
      //参数二：绑定事件
      complete: function (e: any) {
        // 传接口只需要传递e.graphic.geometry.rings[0]
        // 为了显示处理为字符串
        var temp = "";
        e.graphic.geometry.rings[0].forEach((r: any) => {
          temp += r[0] + "," + r[1] + ";";
        });
        FilterRef.value.setFieldsValue({
          drawArea: temp,
        });
      },
      start: function () {},
    }
  );
};
const showFloor = (val: String[]) => {
  if (val != undefined) {
    subLayers.value = val;
    hasSub.value = true;
  } else {
    hasSub.value = false;
  }
};

const switchMap = (name: String) => {
  store.BNMap.switchDCJ(name, (evt: any) => {
    // 一般为调用setCenter和setLevel方法
  });
};

const showAreaDialog = (val: any, data: any) => {
  timer.value = new Date().getTime();
  title.value = val;
  showAreaDialogVisible.value = true;
  nextTick(() => {
    FilterRef.value.setFieldsValue({
      areaName: data.areaName,
      drawArea: data.area,
      isImmission: data.isImmission,
      minThreshold: data.minThreshold,
      thresholdList: data.trolleys,
    });
    drawAreaOnMap(data.area);
  });
};

const drawAreaOnMap = (val: any) => {
  const drawLayer = store.BNMap.creatGraphicsLayer({ id: "demo" });
  const hightSymbol = store.BNSymbol.polygonSymbol(
    "solid",
    hightLine,
    "#fbdbb0"
  );
  const hightLine = store.BNSymbol.simpleLineSymbol("solid", "#f59f2e", 1);
  drawLayer.removeAll();
  // const arr = ref([])
  // arr.value.push(val)
  const polygon = store.BNGeometry.createPolygon({
    rings: val,
    spatialReference: store.BNMap.spatialReference,
  });
  const sectorsym = store.BNSymbol.polygonSymbol(
    "solid",
    store.BNSymbol.simpleLineSymbol("solid", "rgba(11,22,33，1)", 1),
    "rgba(255,12,255,1)"
  );
  const sectorGrp = store.BNMap.graphic(polygon, sectorsym);
  sectorGrp.attributes = {
    NAME: "test",
    DISTRICT: "还是test",
    ADDRESS: "ddddddddd",
  };
  drawLayer.add(sectorGrp);
  const center = getCenterByGeometry(sectorGrp.geometry);
  store.BNMap.setCenter(center.x, center.y);

  store.BNMap.bindEvent(drawLayer, "click", function (evt) {
    var myLayer = "";
    var tempGraphic = "";
    if (evt.clickResult != null) {
      // drawLayer 为当前所操作的图层名称，保持和自己定义的图层名称一致
      var myLayer = evt.clickResult.results.filter(function (result) {
        return result.graphic.layer === drawLayer;
      })[0];
      // 赋值临时图层信息
      const tempGraphic = myLayer.graphic;
      tempGraphic.symbol = hightSymbol;
      drawLayer.add(tempGraphic);
      //弹窗显示内容
      var html = '<div> <img src= "../../../assets/example/image.png" > </div>';
      // 设置弹窗内容
      store.BNWindows.setTitle("房屋基本信息");
      store.BNWindows.setContent(html);
      // 设置弹窗大小
      store.BNWindows.resize(280, 360);
      store.BNWindows.show(evt.mapPoint);
    }
  });
  store.BNMap.addGraphicsLayer(drawLayer);
};

// 7-27新增用于接收弹窗组件值的ref对象
const FilterRef = ref();

const thresholdData1 = ref([
  {
    id: "301",
    areaName: "18",
  },
  {
    id: "304",
    areaName: "15",
  },
  {
    id: "305",
    areaName: "13",
  },
  {
    id: "308",
    areaName: "11",
  },
]);

const thresholdData = ref([
  {
    id: "1",
    areaName: "区域A",
    minThreshold: "20",
    trolleys:
      "A303；A301；A305；A309；A301；A310；A505；A203；A102；A103；A109；A405；A303；A301；A305；A309；A301；A310；A505；A203；A102；A103；A109；A405；",
    isImmission: true,
    area: [
      [136675.54999719388, 40314.37943610105, null],
      [136711.2688186315, 40577.64037928961, null],
      [137014.21734119524, 40503.55689778931, null],
      [137000.98814807017, 40305.11900091352, null],
      [137000.98814807017, 40305.11900091352, null],
      [136675.54999719388, 40314.37943610105, null],
    ],
  },
]);

const Cancel = () => {
  showAreaDialogVisible.value = false;
};
const Service = (data: ListParams) => {
  return new Promise((resolve) => {
    trolleyOptions.forEach((e) => {
      if (e.prop == "type") {
        // 这部分数据应该由接口获取
        // 刚进入页面和点击清空时，应把选择情况清空
        e.inputProps.options = [
          { label: "全部", value: 1 },
          { label: "禁入区", value: 2 },
          { label: "允许进入区", value: 3 },
        ];
        // 手动重写单选按钮点击事件
        e.events.change = function (value, evt) {};
      }
    });
    areaOptions.forEach((e) => {
      if (e.prop == "drawArea") {
        // 手动重写单选按钮点击事件
        e.events.click = function (value, evt) {
          draw("polygon");
        };
      }
    });
    // 模拟数据写入，实际开发使用接口数据写入
    setTimeout(() => {
      const response = {
        params: data,
        data: {
          list: [],
          total: 5,
        },
      };
      resolve(response);
    }, 500);
  });
};
// =============模拟接口数据==END
const {
  run,
  data,
  loading,
  current,
  pageSize,
  total,
  changeCurrent,
  changePageSize,
} = usePagination(Service, {
  manual: true,
  pagination: {
    currentKey: "pageNum",
    pageSizeKey: "pageSize",
    totalKey: "data.total",
  },
});
const search = ref<FilterDataType>({});
// 数据字段名称请自行修改
const trolleyForm = reactive({
  areaName: "", // 区域名称
  trolleyNo: "", // 手推车编号
  type: "1", // 类型
});
// 获取数据
const getData = () => {
  const params = {
    pageNum: current.value,
    pageSize: pageSize.value,
    condition: search.value,
  };
  run(params);
};

// 该功能需要完成
const Submit = (data: FilterDataType) => {
  // 通过FilterRef这个引用获取对应组件下面所有控件的值
  FilterRef.value.getParams();
  const myVariable = ref();
  myVariable.value = FilterRef.value.getParams().minThreshold;
  myVariable.value = myVariable.value || 0;
  if (myVariable.value <= 0) {
    ElMessage.error("请输入大于0的数");
  } else {
    queNumeber.value = FilterRef.value.getParams().minThreshold;
    showAreaDialogVisible.value = false;
  }

  //handlerUpdateModelValue(data)
};
const searchReset = (data: FilterDataType) => {
  search.value = data;
  search.value["area"].checkAll = false;
  // pager.currentPage = 1
  // pager.pageSize = 10
  getData();
};
/* 
* 功能-弹窗显示
* Date: 2023-8-6
* Author: 骆成洋
* row:操作栏数据
* item:列表每一行数据
 */
//查看地图
const handleEdit = (row, item) => {
  //显示标签
  btnshow.value = !btnshow.value;
  // 创建点,
  const point = store.BNMap.createPoint({
    x: 134602.48239337894,
    y: 40180.42070241664,
    spatialReference: store.BNMap.spatialReference,
  });
  //弹窗显示内容
  var html =
    "<div style='background-color:blue;color:white; width:365px; height:200px'> 监控占位</div>";
  // 设置弹窗内容
  store.BNWindows.setTitle("摄像头A01");
  store.BNWindows.setContent(html);
  // 设置弹窗大小
  store.BNWindows.resize(260, 355);
  store.BNWindows.show(point);
};
/* 
* 功能-地图移动到定位点
* Date: 2023-8-6
* Author: 骆成洋
 */
const gatePosition = () => {
  // 创建点,
  const point = store.BNMap.createPoint({
    x: 134602.48239337894,
    y: 40180.42070241664,
    spatialReference: store.BNMap.spatialReference,
  });
  store.BNMap.setCenter(point.x, point.y);
};

onBeforeMount(getData);
</script>
<style lang="less" scoped>
.main-view {
  &::-webkit-scrollbar {
    display: none;
  }
}
.dialog {
  pointer-events: none;
}
.dialog /deep/ .el-dialog {
  pointer-events: auto;
  position: absolute;
  left: 640px;
  top: 140px;
}
</style>
<style lang="less" scoped>
/* 进入动画 */
.left-enter-active {
  animation: move 1s;
  animation-timing-function: linear;
}
.left-leave-active {
  animation: move 1s reverse;
  animation-timing-function: linear;
}

@keyframes move {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translate(0);
  }
}
.right-enter-active {
  animation: move-right 1s;
  animation-timing-function: linear;
}
.right-leave-active {
  animation: move-right 1s reverse;
  animation-timing-function: linear;
}

@keyframes move-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translate(0);
  }
}
.drawer {
  height: 840px;
  padding: 10px 0;
  margin-top: 5px;
  margin-left: 10px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 999;
  background-color: #fff;
  float: left;
}
.drawerRight {
  width: 400px;
  position: absolute;
  top: 0;
  right: 10px;
}
.drawerLeft {
  width: 320px;
  position: absolute;
  top: 0;
  left: 0;
}
.drawer > .title {
  line-height: 32px;
  height: 32px;
  margin-bottom: 10px;
  padding-right: 15px;
  span {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    border-left: #2f7df1 2px solid;
    text-indent: 1em;
  }
  .newArea {
    float: right;
  }
  .titleNumMsg {
    text-indent: 1em;
    margin-top: 10px;
    height: 20px;
    line-height: 20px;
    display: block;
    .num {
      display: inline-block;
      float: left;
      padding-right: 9px;
      span {
        text-indent: 5px;
        height: 20px;
        margin-top: -3px;
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        line-height: 20px;
        font-weight: bolder;
        border: 0;
        color: #2f7df1;
      }
    }
    .num:not(:first-child) {
      border-left: 1px solid #ddd;
    }
  }
}
.dialog {
  /deep/ .el-form-item__label {
    text-align: left;
    width: 130px !important;
  }
}
.drawer > .content {
  line-height: 32px;
  height: 100px;
  margin-bottom: 0px;
  padding: 0 10px 0px;
  position: relative;
  /deep/ .el-form-item__label {
    text-align: left;
    width: 85px !important;
    padding: 0;
    display: inline-block;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
  /deep/ .filter-wrapper {
    display: inline-block;
    margin-top: 5px;
  }
  /deep/ .button-group {
    width: 200px;
    position: absolute;
    top: 55px;
    left: 170px;
  }
}
.alamList {
  padding: 15px 0 15px 15px;
  height: 580px;
}
.msgList {
  padding: 15px 0 15px 15px;
  overflow-y: scroll;
  height: 580px;
}
.msgList::-webkit-scrollbar {
  display: none;
}
.listDiv {
  border: #d7d7d7 1px solid;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px;
  max-height: 120px;
  overflow-y: hidden;
  margin-bottom: 10px;
  .top {
    width: 100%;
    height: 24px;
    line-height: 24px;
    vertical-align: center;
  }
  .top span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-indent: 5px;
    float: left;
    border: 0;
  }
  .top span img {
    margin-top: 2px;
  }
  .top span:first-child {
    font-weight: bolder;
    text-indent: 2px;
    text-align: left;
  }
  .top span:last-child {
    float: right;
    text-align: right;
  }
  .list {
    line-height: 14px;
    max-height: 60px;
    overflow-y: scroll;
  }
  .list::-webkit-scrollbar {
    display: none;
  }
  .msg {
    color: #aaa;
    display: inline-block;
    height: 20px;
    line-height: 20px;
  }
}
.subLayer {
  position: absolute;
  width: 35px;
  top: 100px;
  border: 0;
  transition: left 1s;
  transition-timing-function: linear;
}
.subLayer /deep/ .el-radio-button .el-radio-button__inner {
  width: 35px;
  border: 1px #fff solid;
  padding: 10px;
}
.subLayer /deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 6px 6px 0 0;
}
.subLayer /deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 0 6px 6px;
}

.mapLegendHot {
  border-radius: 8px;
  position: absolute;
  transition: left 1s;
  transition-timing-function: linear;
}
  .mapLegend {
    padding: 10px;
    background: #FFF;
    border-radius: 8px;
    position: absolute;
    width: 180px;
    height: 160px;
    top: 650px;
    right: 10px;
    transition: right 1s;
    font-size: 12px;
    transition-timing-function: linear;
  .sw {
    margin-top: 5px;
    margin-left: 30px;
  }
  div {
    margin-bottom: 8px;
    line-height: 30px;
    .legend {
      float: right;
      border-radius: 4px;
      width: 62px;
      height: 22px;
    }
    .blue {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: #b6e5fb;
      border: 1px solid #0aaaf0;
      width: 18px;
      height: 18px;
    }
    .red {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: red;
      width: 20px;
      height: 20px;
    }
  }
  span {
    display: inline-block;
    height: 12px;
    line-height: 12px;
    margin-right: 2px;
  }
  span:first-child {
    font-weight: bolder;
    width: 60px;
    margin-top: 2px;
    border-left: 2px solid #2F7DF1;
    text-indent: 10px;
  }
}
.mapLegend_a {
  height: 150px;
  right: 420px;
  top: calc(74vh - 22px);
}
.mapLegend_b {
  height: 190px;
  right: 10px;
  top: calc(70vh - 22px);
}
.mapLegendHot_a {
  left: 10px;
  top: calc(80vh - 0px);
  animation: move-b4b4ff0a 0s reverse;
}
.mapLegendHot_b {
  left: 332px;
  top: calc(80vh - 0px);
  animation: move-b4b4ff0a 0s reverse;
}
.btnLayer {
  position: absolute;
  top: 10px;
  border: 0;
}
.btnLayerRight {
  position: absolute;
  top: 10px;
  padding-left: 280px;
  border: 0;
}
.btn {
  width: 15px;
  height: 50px;
  position: absolute;
  top: 350px;
  border: 0;
  background-color: #fff;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 8px 0 0 8px;
  transition: right 1s;
  transition-timing-function: linear;
  object-fit: none;
}
.btnRight {
  border-radius: 8px 0 0 8px;
  transition: right 1s;
  transition-timing-function: linear;
}
.btn_e {
  right: 0;
}
.btn_f {
  right: 410px;
}
.btnLeft {
  border-radius: 0 8px 8px 0;
  transition: left 1s;
  transition-timing-function: linear;
}
.btn_d {
  // animation: move 0s reverse;
  // left: 340px;
  left: 10px;
}
.btn_c {
  // animation: move 0s reverse;
  left: 10px;
}
.btn_d2 {
  animation: move 0s reverse;
  left: 340px;
  // left: 10px;
}
.btn_c2 {
  animation: move 0s reverse;
  left: 10px;
}
.btn_b {
  left: 0;
}
.btn_a {
  left: 330px;
}

.btnGroup {
  position: absolute;
  left: 10px;
  top: 50px;
}

.btnGroup > div {
  margin-right: 15px;
  width: 150px;
  height: 36px;
  line-height: 36px;
  border-radius: 8px !important;
  background-color: #fff;
  float: left;
}
.btnGroup > div:nth-child(2) ~ div {
  margin-right: 15px;
  width: 80px;
  height: 36px;
  line-height: 36px;
  border-radius: 8px !important;
  background-color: #fff;
  float: left;
}
.btnGroup img {
  max-width: 100%;
  object-fit: none;
  float: left;
  background-color: #2f7df1;
  border-radius: 8px !important;
}
.btnGroup span {
  text-align: center;
  width: auto;
  height: 36px;
  font-size: 14px;
  color: #353a42;
  line-height: 36px;
  display: inline-block;
  padding-left: 10px;
}
</style>